<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-2.1.0.js.js" type="text/javascript"></script>

</head>
<body>
<input id="txt1" name="text1" type="text" value="我是测试文本">
<br>
<input type="button" id="btn1" value="点我" onclick="clickme()">
<br>
<input type="button" id="btn2" value="操作div" onclick="clickme2()">
<div id="div1" style="background-color: aqua;width: 200px;height: 100px"></div>
<div id="div2" style="background-color:#dd11ff;width: 200px;height: 100px"></div>
<script type="text/javascript">

    function clickme() {
//        $("#txt1").dblclick();
//        alert("我被点了");
//        $("#txt1").toggle(); //显示与隐藏的开关方法
//                $("#div1").fadeIn();
//        $("#div1").fadeIn("slow");
//        $("#div1").fadeIn(3000);
        console.log($("#txt1").value) ;
        $("#div1").hide("slow",function () { //事件里写一个functions，事件完成之后会调用。那这个func称之为callback。
//            alert("我没有死，只是消失了");

        });
    }
    function clickme1() {

//        $("#div1").fadeIn();
//        $("#div1").fadeIn("slow");
//        $("#div1").fadeIn(3000);
//        $("#div1").fadeOut();
//        $("#div1").fadeOut("fast");
        $("#div1").fadeOut(1000);
    }

    function clickme2() {

//        $("#div1").fadeIn();
//        $("#div1").fadeIn("slow");
//        $("#div1").fadeIn(3000);
//        $("#div1").fadeOut();
//        $("#div1").fadeOut("fast");
//        $("#div1").slideDown("fast");
        $("#div2").slideUp("slow");
    }

    $("#txt1").dblclick(function () {//找到id=txt1的元素，对它的双击事件进行定义。
        $(this).hide(); //this表示元素本身
    })
    $("#txt1").mouseenter(function () {//鼠标指针穿过元素的事件。
//        $(this).hide(); //this表示元素本身
        console.log("你楸啥")
    })
    $("#txt1").mouseleave(function () {//鼠标指针离开元素的事件（必须先穿过才能处罚）。
        console.log("楸你咋的");
    })
    $("#txt1").mousedown(function () {//鼠标指针进入元素（让元素获取焦点），并且发生单击的事件。
        console.log("啪！");
    })
    $("#txt1").focus(function () {//获取焦点。
        console.log("楸你咋的!!!!!");
    })
    $("#txt1").blur(function () {//失去焦点。（其他地方获取了焦点）
        console.log("我滚了!!!!!");
        if(this.value.length>=4){
            $(this).css("color","#fff1a2");
            console.log( $(this).html());
        }
    })

</script>
<script>
    //    alert("我将带头冲锋！");
    $(function () {
//    $("#btn1").click();

    })
</script>
</body>
</html>
